<template>
	<view class="guest">
		<view class="guest-text">访客通行</view>
		<view class="guest-coke">
			<view style="margin-right: 30rpx;">
				你可以将您所在小区下的大门、单元门的开门权限分享给亲朋好友，他们即可扫码开门，方便快捷!
			</view>
			<view>
				<image
					src="https://cdn7.axureshop.com/demo/1996612/images/%E8%AE%BF%E5%AE%A2%E9%82%80%E8%AF%B7/u10246.svg"
					mode="scaleToFill" />
			</view>
		</view>
		<view class="guest-text">小区名称</view>
		<view class="guest-coke-lp" @click="addTextCont">
			<view class="guest-coke-r">
				<image src="https://cdn7.axureshop.com/demo/1996612/images/%E5%BC%80%E9%97%A8/u9980.svg"
					mode="scaleToFill" />
				<view v-if="!text">同文小区</view>
				<view v-else>{{ text }}</view>
			</view>
			<view class="guest-coke-1">
				<image src="../../static/image/箭头.png" mode="scaleToFill" />
			</view>
		</view>
		<view class="guest-text">进出通道</view>

		<view class="guest-At">
			<view class="guest-coke-lpLI">
				<view @click="guestlpLI(item)"
					:class="!item.show ? 'guest-coke-lp-item' : 'actiondet guest-coke-lp-item'" v-for="item in aList"
					:key="item.id">
					<view>
						<image :src="item.img" mode="scaleToFill" />
						<view>{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="guest-text">钥匙分享时间</view>
		<view class="guest-coke-Can">
			<view :class="actionIndex == index ? 'action' : ''" v-for="(item, index) in actionList" :key="item.id"
				@click="actionIx(item.id)">{{ item.name }}</view>
		</view>

		<view class="guest-coke-Fen" @click="kai">
			<image src="../../static/image/分享.png" mode="scaleToFill" />
			分享给访客开门
		</view>

		<up-overlay :show="show" @click="show = false">
			<view class="share-Xia">
				<uni-popup-share></uni-popup-share>
			</view>
			<view class="share-top">
				<view class="share-top-title">西门出口闸机</view>
				<view class="hare-top-qrcode"><up-qrcode :size="150" val="聪哥666"></up-qrcode></view>
				<view class="hare-top-qrcode-text">请将二维码放置门禁摄像头前扫描</view>
				<view class="hare-top-qrcode-but">此二维码钥匙有效时长<text>3小时</text></view>
			</view>
		</up-overlay>
		<view>
			<!-- 类型弹框 -->
			<uni-popup ref="inputDialog" type="dialog">
				<view class="suggest-add-con-itemList-dialog">
					<view @click="addText('同问小区')">同问小区</view>
					<view @click="addText('花园国际小区')">花园国际小区</view>
				</view>
			</uni-popup>
		</view>


		<view style="height: 100rpx;"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
let show = ref(false)
let text = ref("") //小区名称
let inputDialog = ref()
let aList = ref([
	{
		name: "南门入口闸机",
		id: 0,
		img: "../../static/image/u138.svg",
		show: false
	},
	{
		name: "东门出口闸机",
		id: 1,
		img: "../../static/image/u9957.svg",
		show: false
	},
	{
		name: "3号楼1单元门",
		id: 2,
		img: "https://cdn7.axureshop.com/demo/1996612/images/%E5%BC%80%E9%97%A8/u9960.svg",
		show: false
	},
	{
		name: "西门出口闸机",
		id: 3,
		img: "../../static/image/u138.svg",
		show: false
	}
])
let guestlpLI = (show) => {
	aList.value.forEach((item) => {
		if (item.id == show.id) {
			item.show = !item.show
		}
	})
}

let actionIndex = ref(-1)
let actionList = ref([
	{
		id: 0,
		name: "30分钟"
	},
	{
		id: 1,
		name: "1小时"
	},
	{
		id: 2,
		name: "3小时"
	},
	{
		id: 3,
		name: "9小时"
	},
	{
		id: 4,
		name: "1天"
	},
	{
		id: 5,
		name: "2天"
	},
	{
		id: 6,
		name: "5天"
	},
	{
		id: 7,
		name: "7天"
	}
])
let actionIx = (id) => {
	actionIndex.value = id
}
// 打开弹框选择小区
let addText = (textCOnt) => {
	text.value = textCOnt
	inputDialog.value.close()
}
let addTextCont = () => {
	inputDialog.value.open()
}

let kai = () => {
	let showList = aList.value.filter((item) => item.show)
	if (actionIndex.value !== -1 && showList.length) {
		show.value = true
	} else {
		uni.showToast({
			title: '请选择钥匙分享时间和门禁通道',
			icon: 'none',
			duration: 2000
		});
	}
}

</script>

<style scoped lang="scss">
.guest {
	height: calc(100% - 100rpx);
	background-color: #f5f5f5;
	padding: 0 30rpx;
	float: left;
}

.guest-text {
	height: 80rpx;
	line-height: 80rpx;
}

.guest-coke {
	background-color: #fff;
	padding: 30rpx 20rpx;
	display: flex;

	view {
		font-size: 24rpx;
		color: #9a9a9a;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}
}

.guest-coke-lp {
	background-color: #fff;
	height: 40rpx;
	line-height: 40rpx;
	padding: 30rpx 20rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #f5f5f5;

	.guest-coke-r {
		display: flex;

		image {
			width: 30rpx;
			height: 30rpx;
			vertical-align: middle;
			margin-top: 5rpx;
			margin-right: 10rpx;
		}
	}

	.guest-coke-1 {
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
}

.guest-At {
	background-color: #fff;

	// margin: ;
	.guest-coke-lpLI {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.guest-coke-lp-item {
			width: 48%;
			background-color: #f2f2f2;
			padding-bottom: 20rpx;
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			image {
				width: 300rpx;
				height: 150rpx;
			}

			view {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #9a9a9a;
			}
		}
	}
}

.actiondet {
	box-shadow: 0 0 10rpx 5rpx #9cd3f0;
	background-color: #fff !important;
}

.guest-coke-lpLI .guest-coke-lp-item:nth-child(2) image {
	width: 100rpx;
	height: 100rpx;
}

.guest-coke-lpLI .guest-coke-lp-item:nth-child(2) image {
	width: 100rpx;
	height: 100rpx;
}


.guest-coke-Can {
	display: flex;
	background: #fff;
	padding: 30rpx;
	flex-wrap: wrap;

	view {
		margin-top: 20rpx;
		color: #9a9a9a;
		width: 21%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		border: 1rpx solid #989898;
		margin-right: 20rpx;
		font-size: 24rpx;
	}
}

.guest-coke-Fen {
	display: flex;
	background-color: #02a7f0;
	color: #fff;
	width: 300rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	font-size: 24rpx;
	align-items: center;
	justify-content: center;

	image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 30rpx;
	}
}

.action {
	background: #02a7f0;
	color: #fff !important;
	border: 1rpx solid #02a7f0 !important;
}


.share-Xia {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
}

.share-top {
	color: #02a7f0 !important;
	background-color: #fff !important;
	width: 69%;
	height: 700rpx;
	padding: 30rpx;
	margin-left: 80rpx;
	margin-top: 100rpx;
}

.share-top-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1697db;
	padding-bottom: 10rpx;
	border-bottom: 1rpx solid #c5c2c2;
}

.hare-top-qrcode-text {
	margin-top: 20rpx;
	color: #c5c2c2;
	text-align: center;
	font-size: 20rpx;
}

.hare-top-qrcode-but {
	margin: 0 auto;
	margin-top: 60rpx;
	border: 1rpx solid #2cb5f2;
	padding: 20rpx 0;
	width: 350rpx;
	text-align: center;
	color: #5b5b5b;
	font-size: 24rpx;

	text {
		font-size: 30rpx;
		font-weight: 600;
		color: #de2239;

	}
}

.hare-top-qrcode {
	display: flex;
	justify-content: center;
	margin-top: 60rpx;
}
.suggest-add-con-itemList-dialog {
	width: 600rpx;
	height: 500rpx;
	background-color: #fff;
	padding: 30rpx;
	font-size: 28rpx;
	color: #b5b5b5;

	view {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 0.5rpx solid #f5f5f5;
	}
}
</style>
